<html>
<head>

<script src="jquery.min.js" type="text/javascript"></script>
<script src="bootstrap-modal.js" type="text/javascript"></script>
<script src="bootstrap-transition.js" type="text/javascript"></script>
<script src="bootstrap-collapse.js" type="text/javascript"></script>
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="main.css" />

</head>

<div class="container-fluid">
<div class="row-fluid">

<div style="width:400px" >
<h2 margin-top=80px><%= @story.title%>
</h2>
</div>

<div style="width:400px" >
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#content">
Content
</a>
</div>
<div id="content" class="accordion-body collapse in">
<div class="accordion-inner">
<%= raw @story.content%>
</div>
</div>
</div>

<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#media">
photo or video
</a>
</div>
<div id="media" class="accordion-body collapse">
<div class="accordion-inner">
<% if (@story.media_link!= nil && @story.media_link!= "")%>
<a href=""><img src="<%= @story.media_link%>" margin-left=50px margin-top=100px>
</a>
<%else%>
<p>
No thing here to display
</p>
<%end%>
</div>
</div>
</div>

<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
comments
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<% if (@comments !=nil && !@comments.empty?)%>
<%@comments.each do |comment|%>
<%if (comment.content !=nil && comment.content !="")%>
<%if(User.find_by_id(comment.user_id).name != nil && User.find_by_id(comment.user_id).name !="")%>
<p>
<%= User.find_by_id(comment.user_id).name%> : 
</p>
<%else%>
<p>
<%= User.find_by_id(comment.user_id).email%> : 
</p>
<%end%>
<p>
<%=raw comment.content%>
</p>
<%end%>
<%end%>
<%else%>
<p>
No thing here to display
</p>
<%end%>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
